<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生端--首页</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<link rel="stylesheet" href="../css/swiper.min.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../js/swiper.min.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="main">
     <!-- <div class="title">优秀学生案例展示</div> -->
        <div class="w-imgText" id="imgText">
            <div class="swiperBox">
                <ul class="swiper-wrapper" id="swiper">
                   
                    <!-- <li class="swiper-slide" data-title="特训班招生管理系统">
                        <div class="item">
                            <div class="imTB">
                                <div class="img">
                                    <img src="../images/3.png"/>
                                </div>
                                <div class="textB">
                                    <div class="bg_x"></div>
                                    <div class="text_x">
                                        <div class="tt_h">特训班招生管理系统</div>
                                        <p>该系统是以特训班管理为理念的管理系统，是用于特训班招生的管理，方便学生和老师的交流。促进发展特训班的相关进程
                                          。此外可以加强师生合作。方便老师更加的管理好学生，现在展示的是特训班招生系统的登陆界面的展示。登陆界面以蓝色为主调。</p>
										  <div class="btn">查看更多</div>
                                    </div>
                                </div>
                            </div>
                        <a href="#"></a></div>
                    </li> -->
                </ul>
            </div>
            <div class="igt_page"></div>
        </div>
        <div class="igt_page_text">
            <ul class="clearfix">
            </ul>
        </div>
        <script type="text/javascript" src="../layui/layui.js"></script>
     <script type="text/javascript">
        layui.use(['form','layer','element','layedit'],function(){
            var form = layui.form,
                $ = layui.jquery,
                layedit = layui.layedit,
                element = layui.element;
        
            function detailSwiper(edit){
                var index = layui.layer.open({
                    title : "轮播图",
                    type : 2,
                    area: ['90%', '90%'],
                    fixed: false, //不固定
                    maxmin: true,
                    content : "swiperDetail/newsAdd.html",
                    success : function(layero, index){
                        var body = layui.layer.getChildFrame('body', index);
                        if(edit){
                            body.find(".newsName").val(edit.title);
                            body.find(".abstract").val(edit.abstract);
                            body.find(".thumbImg").attr("src",edit.img);
                            body.find("#news_content").val(edit.content);
                            var editIndex = layedit.build(body.find("#news_content"), {
                                height: 535,
                                tool: [
                                    'strong'
                                ]
                            });  
                            form.render();
                             //获取新窗口对象
                            var iframeWindow = layero.find('iframe')[0].contentWindow;
                              //重新渲染
                            iframeWindow.layui.form.render();
                        }
                        setTimeout(function(){
                            layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        },500)
                    }
                })
            }
            $('#swiper').on('click','.item',function(){
                //获取轮播图的id
                var id =$(this).find("input").attr('value');
                console.log(id);
                // 根据id获取数据 
                 $.get("http://127.0.0.1:8000/swiper",{
                    id : id  //将需要删除的newsId作为参数传入
                },function(res){
                    detailSwiper(res.data[id]);
                    console.log(res.data)
                    // detailSwiper();
                })
            });
            //获取的数据要 排序 和筛选
            $.get("http://127.0.0.1:8000/swiper", function (res) {
                
                //模拟插入
                var List = [],
                    data = res.data;
                // console.log(res.data);
                if(data){
                    for (var i = 0; i < data.length; i++) {
                        List.push(
                            '<li class="swiper-slide" data-title="'+data[i].title+'">'+
                                '<div class="item">'+
                                    '<div class="imTB">'+
                                        '<div class="img">'+
                                            '<img src="'+data[i].img+'"/>'+
                                        '</div>'+
                                        '<div class="textB">'+
                                            '<div class="bg_x"></div>'+
                                            '<div class="text_x">'+
                                                '<div class="tt_h">'+data[i].title+'</div>'+
                                                '<p>'+data[i].abstract+'</p>'+
                                                '<input type="text" value="'+i+'" style="display:none" >'+
                                                '<div class="btn detail_btn">查看更多</div>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '<a href="#"></a></div>'+
                            '</li>'
                        );
                    }
                    $('#swiper').append(List);
                    donghua();
                }
            });
            function donghua(){
                var imgTextId=$('#imgText');
                var swiperId=imgTextId.find('.swiperBox');
                var pagediv=imgTextId.find('.igt_page');
                var igtli=imgTextId.find('li');
                var igtliW=100*1.0/igtli.length + '%';
                var titles=[];
                var _html = ''; 
                igtli.each(function (index) { 
                    var title=$(this).attr('data-title');
                    if(index===0){
                        _html += '<li class="igt_li on" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                    }else{
                        _html += '<li class="igt_li" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                    } 
                });
                imgTextId.siblings('.igt_page_text').find('ul').append(_html);
                var swiper1 = new Swiper(swiperId, {
                    effect : 'slide', 
                    autoplay : {
                        delay:8000,//滚动速度
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: pagediv,
                        type: 'custom',
                        renderCustom: function (swiper, current, total) {
                            return '<span class="on">0' + current + '</span><span>/</span><span>0' + total + '</span>';
                        }
                    },
                    on:{
                    slideChange: function(){
                        var index = this.activeIndex;
                        imgTextId.siblings('.igt_page_text').find('li').eq(index).addClass('on').find('.adore').addClass('bg_main');
                        imgTextId.siblings('.igt_page_text').find('li').eq(index).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                    }
                    }
                })
                imgTextId.siblings('.igt_page_text').on('click','li',function(){ 
                    if (!$(this).hasClass('on')){
                        var thisI = $(this).index();
                        $(this).addClass('on').find('.adore').addClass('bg_main');
                        $(this).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                        swiper1.slideTo(thisI, 1000, false);
                    }
                    
                });
            }
                      
        })
                </script>
    </div>
</body>